<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>08_员工列表练习</title>
    </head>
    <body>
        <input type="text" id="i1" placeholder="请输入员工姓名">
        <input type="text" id="i2" placeholder="请输入员工工资">
        <input type="text" id="i3" placeholder="请输入员工岗位">
        <button onclick="addEmp()">添加员工</button>
        <br>
        <hr>
        <table border="1px">
            <caption>员工表</caption>
            <tr>
                <th>姓名</th>
                <th>工资</th>
                <th>岗位</th>
            </tr>
        </table>

        <script>
            let arr = [];
            //1. 每点击一次按钮，调用一次新增员工的方法
            function addEmp() {
                //2. 获取用户再输入框中输入的数据
                let eName = document.getElementById('i1').value;
                let eSalary = document.getElementById('i2').value;
                let eJob = document.getElementById('i3').value;
                //3. 创建1个tr元素与3个td元素
                let tr = document.createElement('tr');
                let nameTd = document.createElement('td');
                let salaryTd = document.createElement('td');
                let jobTd = document.createElement('td');
                //4. 将上方收集号的数据装入td中
                nameTd.innerHTML = eName;
                salaryTd.innerHTML = eSalary;
                jobTd.innerHTML = eJob;
                //5. 将准备号的3个td元素追加到tr中
                tr.append(nameTd,salaryTd,jobTd);
                //6. 找到table元素，将准备号的tr追加到table中
                let table = document.querySelector('table');
                table.append(tr);
                //7.数据成功添加至表格后，输入框中的值应该清空
                document.getElementById('i1').value = '';
                document.getElementById('i2').value = '';
                document.getElementById('i3').value = '';
                arr.push({
                    name:uName,
                    salary:uSalary,
                    job:uJob
                })
                console.log(arr);

            }
        </script>


    </body>
</html>